slot介紹

Slot 如同它的字面翻譯「插槽」。子元件預留了一個空間(槽)，讓父元件插入內容。讓元件的複用變得更加彈性。適合用在結構比較複雜，元件內容可以重複使用的地方。

Vue.component("my-slot", {
  template: `<div><slot></slot></div>`
  },
});

<template>
  <my-slot>Show slot message</my-slot>
</template>

render result

<div>Show slot message</div>

子元件 my-slot 預留了一個插槽，讓父元件插入內容“Show slot messag”，顯示於預留空間。

預備內容(Fallback Content)

父元件沒有放slot內容時，內層component可以設定default要顯示的值。

Vue.component("my-slot", {
  template: `<div><slot>default slot message</slot></div>`
  },
});

<template>
  <my-slot></my-slot>
</template>

具名插槽（Named Slots）

當插槽內容及預留空間只有一個時，會自動對應上。
當元件裡面有多個插槽 slot，就要定義插槽名稱，利用的就是v-slot綁定slot屬性。

Vue.component("my-slot", {
  template: `
    <div>
      <slot name='headerSlot'></slot>
			<slot name='footerSlot'></slot>
      <slot></slot>
    </div>`
});

<my-slot>
  <template v-slot:headerSlot>header Slot Message</template>
  <template>default Slot</template>
  <template v-slot:footerSlot>footer Slot Message</template>
</my-slot>

header Slot Message
footer Slot Message
default Slot

當父元件插入多個內容時，子元件會利用 v-slot 設定其屬性名稱，放置正確內容於對的預留空間!

編譯作用域(Compilation Scope)

Vue官方：父元件裡的所有內容都是在父作用域中編譯。
子元件裡的所有內容都是在子作用域中編譯的。

在元件有父子關聯時，父元件只能拿到其元件內的data，子元件也是如此。

<template>
  <div>
    <my-slot>父元件訊息 : {{text}}</my-slot>
  </div>
</template>

Vue.component("my-slot", {
  template: `
    <div>
      <slot></slot>
      <p>子元件訊息 : {{text}}</p>
    </div>`,
  data() {
    return {
      text: "Component message"
    };
  }
});

export default {
  data() {
    return {
      text: "Slot message",
    };
  },
};

父元件訊息 : Slot message
子元件訊息 : Component message

在component會有限制範圍只能拿自己在data定義的變數值，以上範例，用slot拿該Instance的data

作用域插槽(Scoped Slots)

在元件內的data定義slot的資料

Vue.component("my-slot", {
  template: 
    `<div>
      <slot :slotText='slotdata'></slot>
    </div>`,  
  data() {
    return {
      slotdata: {
        useText: 'slot message again'
      }
    };
  }
});

<my-slot v-slot:"showSlot">
  {{ showSlot.slotText.useText }}
</my-slot>

render result

slot message again

在此元件的 data 有一個 slotdata，在 template 中用了像是 props 的方式把 slotdata 拿去給 slot 使用，這樣在父層使用此元件的時候就用 showSlot.slotText.useText 方式取出來。

Resource
[Vue] Slot 是什麼? 怎麼用?
複用元件的好幫手
slots-in-vue